<template>
	<view>
		<view class="login-tel">
			<view class="tel-main">
				<view class="logo">
					<image src="../../static/logoall3.png" alt="">
				</view>
				<view class="login-form">
					<view class="login-user">
						<text class="user-text">手&nbsp;机&nbsp;号&nbsp;&nbsp;:</text>
						<input type="number" focus="true" v-model="userName" value="" placeholder="请输入正确的11位手机号">
						</view>
					<view class="login-user">
					<text class="user-text">验&nbsp;证&nbsp;码&nbsp;&nbsp;:</text>
					<input type="text" placeholder="请输入验证码" v-model="userCode">
					<button class="btn" plain="true" size="mini" @tap="sendcode">{{codemsg}}</button>
					</view>
						
				</view>
		    </view>
		    <view class="tel" @tap="gonextIndex">下一步</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'//把login方法拿过来
	import $http from '@/common/api/request.js'//引入request组件
	export default {
		data() {
			return {
				// 显示的倒计时时间
				codenum: 60,
				// 显示的文本
				codemsg: "",
				type:'login',
				// 按钮是否禁用
				disable: false,
				type1:"login",
				//用户输入的内容
				userCode: "" ,// 添加usercode属性并初始化为空字符串
				phone:"",//上个页面传过来的phone
				getCode:"",
				password:'',
				userName: '',
				user:[],
				userId:'',
			
				rules: {
				  userName: {
				    rule: /^1[3456789]\d{9}$/,
				    msg: "请输入正确的11位手机号"
				  },
				  userCode: {
				    rule: /^\d{4}$/,
				    msg: "请输入四位数验证码"
				  },
				  				
				
			},
			}
		},
		mounted() {
			this.codemsg = '重新发送(' + this.codenum + ')';
			this.sendcode();
			this.user = uni.getStorageSync('user');
			//this.userName = uni.getStorageSync('user.name');
			console.log('555',this.user)
		},
		onLoad(e){
			this.phone=e.phone;
		},
		methods: {
		
			...mapMutations(['login']),
			validate(key){
				let bool=true;
				if(  !this.rules[key].rule.test(this[key])){
					uni.showToast({
						title:this.rules[key].msg,
						icon:"none"
					})
					bool=false;
					return false;
				}
				return bool;
			},
			// 发送验证码
			// 发送验证码
			sendcode() {
				if (!this.validate('userName')) return;
			
				let requestData0 = {
				  phone: this.userName,
				  type: this.type,
						 
				};
			
				//请求接口返回验证码
				$http.request({
					url: "/user/send_msg",
					method: "GET",
					data: requestData0,
				}).then((res) => {
			uni.showToast({
					title: '发送成功', //例子里是如果账号存在则提示后端传给我的msg:账号已存在信息,如果不存在，则才能继续注册
					icon: "none"
				})
				
					//this.getCode = res.code; //res.code就是拿到的验证码,需要拿拿到的this.getCode与用户输入的userCode对比	
					//console.log(res.code); //打印一下从后端拿到的code值
				}).catch(() => {
					// uni.showToast({
					// 	title: '请求失败',
					// 	icon: 'none'
					// })
				})
			
			
				this.disable = true;
				let timer = setInterval(() => {
					--this.codenum;
					this.codemsg = '重新发送(' + this.codenum + ')';
				}, 1000); //一秒减一次
				setTimeout(() => {
					clearInterval(timer);
					this.codenum = 60;
					this.disable = false;
					this.codemsg = '重新发送';
				}, 60000); //60秒后重发
			},
			//登录
		gonextIndex() {
		  if (!this.validate('userName')) return;
		  if (!this.validate('userCode')) return;
		
		
		  let requestData = {
		    phone: this.userName,
		    code: this.userCode,
		 
		  };
		
		  uni.request({
		    url: 'http://43.136.172.73/api/v1/auth/login',
		    method: 'POST',
		    data: requestData,
		    header: {
		      'Authorization': 'sfsdf',
		    },
		    success: (res) => {
		      console.log(res.data); // 打印接收到的后端返回的信息
		
		  //     if (res.data.code === 2005) {
		  //       uni.showToast({
		  //         title: '密码错误',
		  //         icon: 'none'
		  //       });
				// } 
				 if (res.data.code === 2001) { // 添加这个判断语句
				  uni.showToast({
				    title: '用户不存在',
				    icon: 'none'
				  });
				} else if (res.data.code === 500) { // 添加这个判断语句
				  uni.showToast({
				    title: '登录失败，请检查账号或验证码',
				    icon: 'none'
				  });
		      } else  {
		        this.user = res.data.map.user;
		        this.userId = res.data.map.user.id;
		        console.log('打印用户', this.user);
		        uni.showToast({
		          title: '登录成功',
		          icon: 'none',
		          duration: 1000
		        });
		
		        uni.setStorageSync('userId', this.userId);
		        uni.setStorageSync('user', this.user);
		
		        setTimeout(() => {
		          uni.navigateTo({
		            url: '../index/index?userId=' + this.userId
		          });
		        }, 1000);
		      }
		    },
		    fail: (err) => {
		      uni.showToast({
		        title: '登录失败',
		        icon: 'none'
		      });
		    }
		  });
		},
			
		
		}
	}
</script>

<style scoped>
	.login-tel {
		padding: 30rpx;
		width: 100vw;
		height: 100vh;
	}
	.tel-main {
		padding: 0 20rpx;
		padding-top: 0rpx;
	}
	.logo{
		padding-top: 70rpx;
		padding-bottom: 80rpx;
		display: flex;
		justify-content: center;
		
	}
	.tel {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #FFFF;
		background-color: #49BDFB;
		border-radius: 40rpx;
	}
	.login-form {
	position: relative;
		display: flex;
		flex-direction: column;
		padding-bottom: 20rpx;
		white-space: nowrap;
		width: 100%; /* 或根据需求设置合适的宽度 */
	
	}
	.login-user {
	position: relative;
	display: flex;
	align-items: center;
	height: 100rpx;
	line-height: 100rpx;
	text-align: left;
	color:black;
	background-color: #f7f7f7;
	border-radius: 40rpx;
	padding: 20rpx 0;
	margin: 20rpx 0rpx;
	border-bottom: 2rpx solid #f7f7f7;
		
	}
	.user-text {
		margin-left: 20rpx;
		padding-right: 10rpx;
		font-size: 32rpx;
		align-items: center;
		text-align: center;
		color: black;
		font-weight: 400;	
	}
	.btn {
	right: 10rpx;
	
	}
</style>
